
<template>
    <el-form label-position="left" label-width="82px" :inline="true" :model="state.dataForm"
      @keyup.enter="state.getDataList()">
      <el-row>
        <el-col :span="6.5">
          <el-form-item label="个人收藏：">
            <el-select placeholder="请选择" v-model="state.dataForm.dfvId">
              <el-option v-for="role in collectList" :key="role.id" :label="role.dfvName" :value="role.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="1.5">
          <el-form-item>
            <el-button @click="collectAdd()" :disabled="state.multiple">加入</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="1.5">
          <el-button @click="collectDelete()" :disabled="state.multiple">移除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" style="margin-left:20px" @click="handleFavorite()">新建收藏夹</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="操作类型：">
            <ren-radio-group v-model="state.dataForm2.type" dict-type="Operation-type" style="width: 320px;">
            </ren-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="0">
            <ren-select v-if="state.dataForm2.type==0" v-model="state.dataForm2.field" dict-type="dict_class" placeholder="请选择"></ren-select>
            <ren-select v-if="state.dataForm2.type==1" v-model="state.dataForm2.field" dict-type="dict_class" placeholder="请选择"></ren-select>
            <ren-select v-if="state.dataForm2.type==2" v-model="state.dataForm2.field" dict-type="dict_class" placeholder="请选择"></ren-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="为" label-width="30px" style="margin-left: 10px;">
            <ren-select  v-if="state.dataForm2.field=='person_level'" v-model="state.dataForm2.fieldValue" dict-type="person_level"
              placeholder="请选择"></ren-select>
              <ren-select  v-else-if="state.dataForm2.field=='responsibility'" v-model="state.dataForm2.fieldValue" dict-type="responsibility"
              placeholder="请选择"></ren-select>
              <ren-select  v-else-if="state.dataForm2.field=='work_nature'" v-model="state.dataForm2.fieldValue" dict-type="work_nature"
              placeholder="请选择"></ren-select>
              <ren-select  v-else-if="state.dataForm2.field=='tag2'" v-model="state.dataForm2.fieldValue" dict-type="tag2"
              placeholder="请选择"></ren-select>
              <el-input  v-else-if="state.dataForm2.field=='tag1'" v-model="state.dataForm2.fieldValue"
              type="text" placeholder="请输入" clearable></el-input>
              <ren-select  v-else-if="state.dataForm2.field=='contact_category'" v-model="state.dataForm2.fieldValue" dict-type="contact_category"
              placeholder="请选择"></ren-select>
              <el-input  v-else-if="state.dataForm2.field=='remark'" v-model="state.dataForm2.fieldValue" dict-type="remark"
              type="text" placeholder="请输入" clearable></el-input>
            <ren-select  v-else  v-model="state.dataForm2.fieldValue"  placeholder="请选择">  </ren-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <div style="margin-left: 20px;">
            <el-button type="primary" @click="operationSubmit"  :disabled="state.multiple" >确定</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="1">
          <el-checkbox v-model="state.dataForm.checkAll" @change="chanckAll">全选</el-checkbox>
        </el-col>
        <el-col :span="2.5">
          <el-button @click="replacePersonnel()" :disabled="state.multiple">替换人员数据筐</el-button>
        </el-col>
        <el-col :span="2.5">
          <el-button @click="joinPersonnel()" :disabled="state.multiple">加入人员数据筐</el-button>
        </el-col>
        <el-col :span="2.5">
          <el-button @click="deletePersonnel()" :disabled="state.multiple">人员数据筐中移除</el-button>
        </el-col>
        <!-- <el-col :span="2.5">
          <el-button @click="handleAuthority()" :disabled="state.multiple">设置标签分类</el-button>
        </el-col>
        <el-col :span="2.5">
          <el-button @click="hanleUnlabeling()" :disabled="state.multiple">取消标签分类</el-button>
        </el-col> -->
        <el-col :span="2.5">
          <el-button @click="addOrUpdateHandle()" :disabled="state.multiple">加入任务</el-button>
        </el-col>
        <el-col :span="2.5">
          <el-button @click="addBlacklist()" :disabled="state.multiple">加入黑名单</el-button>
        </el-col>
        <el-col :span="2.5">
          <el-button type="primary" @click="toggleListVisibility()">返回</el-button>
        </el-col>
        <el-col :span="2.5">
          <el-button v-if="state.hasPermission('crm:crmperson:delete')" type="danger"  @click="state.deleteHandle()" :disabled="state.multiple">{{ $t("deleteBatch") }}</el-button>
        </el-col>
      </el-row>
      <el-table
        :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec', 'whiteSpace': 'nowrap', }"
        v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle"
        style="width: 100%;margin-top: 15px;">
        <el-table-column type="selection"> </el-table-column>
        <el-table-column align="center" prop="name" label="姓名" min-width="50" type="primary">
          <template v-slot="scope">
            <el-link  :underline="false" type="primary" @click="userHandle(scope.row.id)">{{ scope.row.name }}</el-link>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="company" label="公司"></el-table-column>
        <el-table-column align="center" prop="mobile" label="手机1"  min-width="60"></el-table-column>
        <el-table-column align="center" prop="mobile2" label="手机2" min-width="60"></el-table-column>
        <el-table-column align="center" prop="tel" label="电话1" min-width="60"></el-table-column>
        <el-table-column align="center" prop="tel2" label="电话2" min-width="60"></el-table-column>
        <el-table-column align="center" prop="position" label="职务" min-width="40"></el-table-column>
        <el-table-column align="center" prop="email" label="邮箱"  ></el-table-column>
        <el-table-column align="center" prop="city" label="城市"  min-width="40"></el-table-column>
        <el-table-column align="center" prop="lrdLastLinkTime" label="最后联络时间" ></el-table-column>
        <el-table-column align="center" prop="updateTime" label="修改时间"  ></el-table-column>
        <el-table-column align="center" prop="realName" label="修改人" min-width="40"></el-table-column>
      </el-table>
    </el-form>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
      :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
      @current-change="state.pageCurrentChangeHandle">
    </el-pagination>
    <!-- 弹窗加入任务 -->
    <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="state.getDataList" :psnIdList='state.dataForm'
      :checkAll='state.dataForm.checkAll' :condition='state.dataForm'></add-or-update>
    <!-- 设置标签 -->
    <tag ref="exhibitionPowerRef" @refreshDataList="state.getDataList" :psnIdList='state.dataForm'
      :checkAll='state.dataForm.checkAll' :condition='state.dataForm'></tag>
    <!-- 新建收藏夹 -->
    <favorites ref="newFavorite" @refreshDataList="getCollectList"></favorites>
</template>
<script lang="ts" setup>
import { useRoute } from 'vue-router';
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, watch } from "vue";
import { ElMessage } from "element-plus";
import baseService from "@/service/baseService";
import { useI18n } from "vue-i18n";
import { useRouter } from 'vue-router'
import AddOrUpdate from "./join-tasks.vue";
import Watermark from '@/layout/Watermark.vue';
import tag from "./custom-tags.vue";
import favorites from "./favorites-list-add-or-update.vue"
const view = reactive({
  getDataListURL: '/crm/crmperson/queryPage',
  getDataListIsPage: true,
  deleteURL: "/crm/crmperson",
  deleteIsBatch: true,
  dataForm: {
    id: "",
    name: "",//人员姓名
    exhName: "",
    department: "",//部门
    tel: "",//电话
    mobile: "",//手机
    wechat: '',//微信
    company: "",//公司
    position: "",
    address: "",//地址
    type: "",//人员类别
    exhId: "",//展会id
    pjpType: "",//	参会类别
    level: '',//人员级别
    unifyDept: "",//工作性质
    unifyRank: "",//岗位职责
    epjName: "",//展会项目名
    trade: "",//行业
    extField1: '',//标签一
    extField2: "",//标签二
    resource: "",//来源
    remark: "",//备注
    country: "",//国家
    province: "",//省
    city: "",//城市
    productIntroduce: "",
    isVisible: true,
    dfvName: "",//收藏夹名
    dfvId: "",//收藏夹id
    psnIdListStr: "",
    field: "",
    fieldValue: "",
    checkAll: false as any,
    dataBox: "",//人员数据筐
    psnIdList: '' as any,
    selectedDfvId: useRoute().query.id,//接受过来的参数
    dfvIdsStr:useRoute().query.ids,//接受过来的参数
    limit: 15,

  },
  dataForm2: {
    type: 0,
    field: "",
    fieldValue: "",
    psnIds: [] as any[],//收藏夹人员id
    sourceIdList: [] as any[],
    userIds: [] as any[],
    psnldListStr:[] as any[],
  },
  dataForm3: {
    id: "",
    name: "",//人员姓名
    exhName: "",
    department: "",//部门
    tel: "",//电话
    mobile: "",//手机
    wechat: '',//微信
    company: "",//公司
    position: "",
    address: "",//地址
    type: "",//人员类别
    exhId: "",//展会id
    pjpType: "",//	参会类别
    level: '',//人员级别
    unifyDept: "",//工作性质
    unifyRank: "",//岗位职责
    epjName: "",//展会项目名
    trade: "",//行业
    extField1: '',//标签一
    extField2: "",//标签二
    resource: "",//来源
    remark: "",//备注
    country: "",//国家
    province: "",//省
    city: "",//城市
    condition: "",
  },
  dataForm4: {
  },
})

const init = () => {
  getCollectList()
};

//返回上一页
const toggleListVisibility = () => {
  router.push({
    path: "/expocube/favorites-list",
  });
  state.getDataList()
  
};

// 点击全选按钮
const chanckAll = () => {
  state.multiple = !state.dataForm.checkAll
}



//查看跳转
const router = useRouter();
const userHandle = (row: any) => {
  router.push({
    path: "/expocube/personnel-information-details",
    query: {
      id: row,
    }
  });
};


/**
 *收藏夹列表
 */
 const collectList = ref<any[]>([]);
const getCollectList = () => {
  return baseService.get("/crm/crmdatafavorite/getByStufId").then((res) => {
    collectList.value = res.data;
    if (collectList.value.length > 0) {
      state.dataForm.dfvId = collectList.value[0].id;
    }
  });
};



/**
 * 个人收藏加入
 */
const collectAdd = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm2.psnIds = ids;
  state.dataForm2.psnIds = state.dataForm2.psnIds.map((item: number) => Number(item)); // 转换psnIds中的字符串为数字
  return baseService.post("/crm/crmdatafavoritedetail/addFavorite", { dfvId: state.dataForm.dfvId, psnIds: state.dataForm2.psnIds }).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      return ElMessage.success("收藏夹加入成功");
    }
  });
};

/**
 * 个人收藏移除
 */
const collectDelete = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm2.psnIds = ids;
  state.dataForm2.psnIds = state.dataForm2.psnIds.map((item: number) => Number(item));
  return baseService.delete("/crm/crmdatafavoritedetail/deleteFavorite", { dfvId: state.dataForm.dfvId, psnIds: state.dataForm2.psnIds }).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      return ElMessage.success("收藏夹移除成功");
    }
  });
};

/**
 * 新建收藏夹
 */
const newFavorite = ref();
const handleFavorite = () => {
  nextTick(() => {
    newFavorite.value.init(state.dataForm);
  });
}


/**
 * 替换人员数据筐
 */
const replacePersonnel = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm2.sourceIdList = ids;
  state.dataForm2.sourceIdList = state.dataForm2.sourceIdList.map((item: number) => Number(item));
  return baseService.put("/crm/crmuserdatabox/replaceBox", { checkAll: state.dataForm.checkAll, condition: state.dataForm3, sourceIdList: state.dataForm2.sourceIdList }).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      return ElMessage.success("替换人员数据筐成功");
    }
  });
}

/**
 * 加入人员数据筐
 */
 const joinPersonnel = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm2.sourceIdList = ids;
  state.dataForm2.sourceIdList = state.dataForm2.sourceIdList.map((item: number) => Number(item));
  return baseService.post("/crm/crmuserdatabox/addBox", { checkAll: state.dataForm.checkAll, condition: state.dataForm3, sourceIdList: state.dataForm2.sourceIdList }).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      return ElMessage.success("加入人员数据筐成功");
    }
  });
}

/**
 * 人员数据筐移除
 */
const deletePersonnel = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm2.sourceIdList = ids;
  state.dataForm2.sourceIdList = state.dataForm2.sourceIdList.map((item: number) => Number(item));
  return baseService.delete("/crm/crmuserdatabox/removeBox", { checkAll: state.dataForm.checkAll, condition: state.dataForm3, sourceIdList: state.dataForm2.sourceIdList }).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      return ElMessage.success("移除人员数据筐成功");
    }
  });
}

/**
 * 取消标签分类
 */
const hanleUnlabeling = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm2.psnldListStr = ids;
  state.dataForm2.psnldListStr = state.dataForm2.psnldListStr.map((item: number) => Number(item));
  return baseService.get("/crm/crmbasetag/getSelectedList",{psnldListStr:state.dataForm2.psnldListStr.join()}).then((res: any) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      return ElMessage.success("取消标签分类成功");
    }
  });
}

/**
 * 加入黑名单
 */
const addBlacklist = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm4 = ids;
  return baseService.put("/crm/crmperson/addBlacklist", state.dataForm4).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      return ElMessage.success("加入黑名单成功");
    }
  });
}

/**
 * 操作类型后的确认
 */
const operationSubmit = () => {
  // //todo 获取选中的userIds
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm2.userIds = ids;
  state.dataForm2.userIds = state.dataForm2.userIds.map((item: number) => Number(item));
  return baseService.put("/crm/crmperson/batchOperation", { type: Number(state.dataForm2.type), field: state.dataForm2.field, fieldValue: state.dataForm2.fieldValue, checkAll: state.dataForm.checkAll, userIds: state.dataForm2.userIds, condition: state.dataForm3 }).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      return ElMessage.success("操作成功");
    }
  });
}

//设置标签分类弹窗
const exhibitionPowerRef = ref();
const handleAuthority = (id?: number) => {
  nextTick(() => {
    let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm2.sourceIdList = ids;
  state.dataForm2.sourceIdList = state.dataForm2.sourceIdList.map((item: number) => Number(item));
    console.log(state.dataForm2);
    exhibitionPowerRef.value.init(id,state.dataForm2.sourceIdList);
  });
}


//加入任务弹窗户
const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addKey.value++;
  
  nextTick(() => {
    let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm.psnIdList = ids;
  state.dataForm.psnIdList = state.dataForm.psnIdList.join('');
    addOrUpdateRef.value.init(id, state.dataForm, state.dataForm.checkAll, state.dataForm3);
  });
};

const state = reactive({ ...useView(view), ...toRefs(view) });

init();
</script>
<style lang="scss" scoped>
.el-col {
  margin-top: -5px;
}

.el-button {
  margin-right: 10px;
}
::v-deep .el-table .cell {
  white-space: nowrap;
  font-size: 13px;
  height: 18px;
  line-height: 18px;
  }
</style>